<template>
  <div class="hospital">
    <!-- 左侧导航区域 -->
    <div class="menu">
      <el-menu
        :default-active="`/hospital/register?hoscode=${route.query.hoscode}`"
        router
        class="el-menu-vertical-demo"
      >
        <el-menu-item :index="`/hospital/register?hoscode=${route.query.hoscode}`">
          <el-icon>
            <Calendar />
          </el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/detail?hoscode=${route.query.hoscode}`">
          <el-icon>
            <document />
          </el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/notice?hoscode=${route.query.hoscode}`">
          <el-icon>
            <Bell />
          </el-icon>
          <span>预约须知</span>
        </el-menu-item>

        <el-menu-item :index="`/hospital/close?hoscode=${route.query.hoscode}`">
          <el-icon>
            <Warning />
          </el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/search?hoscode=${route.query.hoscode}`">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展示区域：路由组件展示位置 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Document,
  Calendar,
  Search,
  Warning,
  Bell
} from "@element-plus/icons-vue";
// @ts-ignore
import { onMounted } from "vue";
import { useRoute } from "vue-router";
// @ts-ignore
import useDetailStore from "@/store/modules/hospitalDetail.ts";
const route = useRoute();
let detailStore = useDetailStore();
onMounted(() => {
  detailStore.getHospital(route.query.hoscode as string);
  // 获取某一个医院科室的数据
  detailStore.getDepartment(route.query.hoscode as string)
});
</script>
  
<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
.el-menu-item {
  &:hover {
    background: transparent;
  }
}
.hospital {
  display: flex;
  margin-top: 10px;
  .menu {
    flex: 2;
  }
  .content {
    flex: 8;
  }
}
</style>